<template>
    <div class="help-product-list-page">
    <el-card>
        <el-button type="primary" @click="onAddClick">新增</el-button>
        <div class="mt-4" v-loading="loading">
            <el-table :data="data">
                <el-table-column align="center" label="标题" prop="name"/>
                <el-table-column align="center" label="描述" prop="introduction"/>
                <el-table-column align="center" label="内容">
                    <template slot-scope="{row}">
                        <el-button @click="onPreview(row)" type="text">预览内容</el-button>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="图标">
                    <template slot-scope="{row}">
                        <el-image
                            :src="row.icon"
                            class="w-20 h-20 object-cover"
                            :preview-src-list="[row.icon]">
                            <div slot="error" class="image-slot">
                                <i class="el-icon-picture-outline"></i>
                            </div>
                        </el-image>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="日期" prop="date"/>
                <el-table-column align="center" label="创建时间">
                    <template slot-scope="{row}">
                        {{ row.created_at | formatTime }}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="操作">
                    <template slot-scope="{row}">
                        <el-button type="text" @click="onTopClick(row)">
                            {{ row.is_shelf ? '下架' : '上架' }}
                        </el-button>
                        <el-button type="text" @click="onEditClick(row)">编辑</el-button>
                        <el-button type="text" @click="onDeleteClick(row)" class="red-color">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div v-if="totalElements > 0" class="footer flex justify-end items-center">
            <el-pagination
                @current-change="fetchData"
                @size-change="fetchData"
                class="center"
                :current-page.sync="proForm.page"
                :page-size.sync="proForm.size"
                :page-sizes="[10, 25, 50]"
                layout="sizes, total, prev, pager, next, jumper"
                :total="totalElements">
            </el-pagination>
        </div>

        <!-- 产品日志新增&编辑 -->
        <el-drawer
            title="产品日志新增&编辑"
            :visible.sync="drawer"
            direction="rtl"
            size="70%"
            :before-close="handleClose">
            <div class="p-2">
                <el-form
                    :model="dialogForm"
                    label-position="right"
                    label-suffix=":"
                    label-width="100px"
                    ref="dialogForm"
                    :rules="rules">
                    <el-form-item label="日志标题" prop="name">
                        <el-input
                            v-model="dialogForm.name"
                            placeholder="请输入日志标题"
                            class="input-width">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="日志描述" prop="introduction">
                        <el-input
                            v-model="dialogForm.introduction"
                            placeholder="请输入日志描述"
                            class="input-width">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="日志日期" prop="time_at">
                        <el-date-picker
                            v-model="dialogForm.time_at"
                            type="datetime"
                            value-format="timestamp"
                            placeholder="选择日期时间">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="日志图标" prop="icon">
                        <file-upload :type="1" :multiple="false" v-model="dialogForm.icon">
                            <img
                                v-if="dialogForm.icon"
                                :src="dialogForm.icon"
                                class="uploader-icon picture image-uploader"
                            />
                            <i v-else class="el-icon-plus uploader-icon picture image-uploader"></i>
                        </file-upload>
                    </el-form-item>
                    <el-form-item label="日志内容" prop="content">
                        <tinymce v-model="dialogForm.content"></tinymce>
                    </el-form-item>
                </el-form>
                <div class="text-center">
                    <el-button :loading="loading" type="primary" @click="onSave">保 存</el-button>
                    <el-button @click="onCancel">取 消</el-button>
                </div>
            </div>
        </el-drawer>

        <el-drawer
            title="预览"
            :visible.sync="drawerT"
            direction="rtl"
            size="70%">
            <div v-html="content" class="p-2"></div>
        </el-drawer>

    </el-card>
    </div>
</template>

<script>
import { Image, Drawer } from 'element-ui';
import Tinymce from '@/components/base/Tinymce';
import FileUpload from '@/components/base/FileUpload';

export default {
    components: {
        ElImage: Image,
        ElDrawer: Drawer,
        Tinymce,
        FileUpload,
    },
    data() {
        return {
            loading: false,
            drawer: false,
            drawerT: false,
            data: [],
            proForm: {
                page: 1,
                size: 25,
            },
            totalElements: 1,
            content: '',

            dialogForm: {
                name: '',
                introduction: '',
                icon: '',
                content: '',
                time_at: '',
            },
            rules: {
                name: [
                    { required: true, message: '请输入标题', trigger: 'blur' },
                ],
                introduction: [
                    { required: true, message: '请输入描述', trigger: 'blur' },
                ],
                icon: [
                    { required: true, message: '请上传图标', trigger: 'change' },
                ],
                content: [
                    { required: true, message: '请输入内容', trigger: 'blur' },
                ],
                time_at: [
                    { required: true, message: '请选择日期', trigger: 'blur' },
                ],
            },
        };
    },
    watch: {
        drawer(val) {
            if (!val) {
                this.dialogForm = {
                    name: '',
                    introduction: '',
                    icon: '',
                    content: '',
                    time_at: '',
                };
            }
        },
    },
    methods: {
        fetchData() {
            this.loading = true;
            API.get('product_log', {params: this.proForm}).then((res) => {
                this.data = res.content;
                this.totalElements = res.pagination.total;
            }).finally(() => {
                this.loading = false;
            });
        },
        onAddClick() {
            this.drawer = !this.drawer;
        },
        onEditClick(row) {
            this.onAddClick();
            this.dialogForm = {...row, time_at: row.time_at * 1000};
        },
        onDeleteClick(row) {
            $ele.$confirm('是否删除此产品日志？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(() => {
                this.loading = true;
                API.delete(`product_log/${row.id}`, {
                }).then(() => {
                    $ele.$message.success('删除成功');
                    this.fetchData();
                }).finally(() => {
                    this.loading = false;
                });
            }).catch(() => { });
        },
        onTopClick(row) {
            const text = row.is_shelf ? '下架' : '上架';
            $ele.$confirm(`是否${text}此产品日志？`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(() => {
                this.loading = true;
                API.put(`product_log/shelves/${row.id}`).then(() => {
                    $ele.$message.success('操作成功');
                    this.fetchData();
                }).finally(() => {
                    this.loading = false;
                });
            }).catch(() => { });
        },
        onPreview(e) {
            this.content = e.content;
            this.drawerT = true;
        },

        // dialogForm
        onSave() {
            this.$refs.dialogForm.validate((valid) => {
                if (valid) this.postData();
            });
        },
        postData() {
            let method = 'post';
            let message = '新增成功';

            if (this.dialogForm.id) {
                method = 'put';
                message = '编辑成功';
            }

            this.loading = true;
            API[method]('product_log', this.dialogForm).then(() => {
                $ele.$message.success(message);
                this.onCancel();
                this.fetchData();
            }).finally(() => this.loading = false);
        },
        onCancel() {
            this.onAddClick();
        },
        handleClose(done) {
            $ele.$confirm('确认关闭？')
                .then(() => {
                    done();
                })
                .catch(() => {});
        },
    },
    mounted() {
        this.fetchData();
    },
};
</script>

<style lang="scss">
.help-product-list-page {
    .input-width {
        max-width: 300px;
    }

    .footer {
        height: 44px;
        background: #f7f7f7;
        padding-left: 20px;
        padding-right: 20px;
    }

    .el-drawer__body {
        height: 90%;
        overflow-y: auto;
        padding-bottom: 10px;
    }

    .picture {
        width: 100px;
        height: 100px;
        line-height: 100px;
    }
    .uploader-icon {
        font-size: 20px;
        color: #8c939d;
        text-align: center;
    }
    .image-uploader {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .el-drawer__header > :first-child,
    .el-drawer__open .el-drawer.rtl {
        outline: none;
    }
}
</style>
